<template>
  <el-button type="primary" @click="add(props)">添加</el-button>
  <el-table
    :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    style="width: 100%" border
  >
    <el-table-column prop="roleId" label="类型属性" width="70" />
    <el-table-column prop="roleName" label="用户类型" width="100" />
    <el-table-column fixed="right" label="操作" width="300">
      <template #default="row">
        <el-button type="success" @click="handleClick(row)"> 编辑 </el-button>
        <!-- 删除确认框 -->
        <el-popconfirm title="确定要删除吗?" @confirm="del(row)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible1" title="增加" width="30%">
    <el-form label-width="120px">
      <el-form-item label="类型属性">
        <el-input v-model="info1.roleId" />
      </el-form-item>
    </el-form>
    <el-form label-width="120px">
      <el-form-item label="用户类型">
        <el-input v-model="info1.roleName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="insert()" v-model="dialogVisible1"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" title="编辑" width="30%">
    <el-form label-width="120px">
      <el-form-item label="用户类型">
        <el-input v-model="info2.roleName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="edit()" v-model="dialogVisible"
          >确认</el-button
        >
         </span>
    </template>
  </el-dialog>
  <el-pagination
    currentPage="currentPage"
    :page-sizes="[5 ,8, 10, 16]"
    page-size="10"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="list.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      currentPage: 1, //默认页码为1
      pagesize: 10, //默认一页显示10条
      dialogVisible: false,
      dialogVisible1: false,
      info2: {}, //修改数据
      info1: {}, //新增数据
      list: []
    }
  },
  //初始化工作
  mounted() {
    get('/getAllUserrole').then((res) => {
      console.log(res)
      this.list = res.data
    })
  },
  methods: {
    handleSizeChange: function (size) {
      //一页显示多少条

      this.pagesize = size
    },

    handleCurrentChange: function (currentPage) {
      //页码更改方法

      this.currentPage = currentPage
    },
    handleClick(row) {
      this.info2 = row.row
      this.dialogVisible = !this.dialogVisible
    },
    del(data) {
      console.log(data.row.departmentId)
      get('/deleteUserrole', { departmentId: data.row.roleId }).then(
        (res) => {
          ElMessage({
            message: '删除成功！',
            type: 'success'
          })
        }
      )
      window.location.reload() //刷新
    },
    edit() {
      this.dialogVisible = !this.dialogVisible //马上消失
      //作用是调整下createTime的格式
      var dt = new Date(this.info2.createTime)
      let year = dt.getFullYear()
      let month = dt.getMonth() + 1
      let date = dt.getDate()
      this.info2.createTime = year + '/' + month + '/' + date
      var dy = new Date(this.info2.lastLogin)
      let year01 = dy.getFullYear()
      let month01 = dy.getMonth() + 1
      let date01 = dy.getDate()
      this.info2.lastLogin = year01 + '/' + month01 + '/' + date01
      get('/updateUserrole', this.info2).then((res) => {
        ElMessage({
          message: '修改成功！',
          type: 'success'
        })
        window.location.reload()
      })
    },
     reset(row) {
      this.adg = row
     get('/updatePassword', this.info2).then((res) => {
        ElMessage({
          message: '修改成功！',
          type: 'success'
        })
        window.location.reload()
      })
    },
       reset(row) {
        get('/updateUser', {userId: row.row.userId,
        password:'111111' }).then((res) => {
          console.log(this.res)
          ElMessage({
            message: '重置成功！',
             type: 'success'
             })
             window.location.reload()
              })
              },
      add() {
      this.dialogVisible1 = !this.dialogVisible1
    },        
    insert() {
      this.dialogVisible1 = !this.dialogVisible1
      get('/addUserrole',this.info1).then((res) => {
        //console.log(res);
        if(res.data==1)
        {
        ElMessage({
          message:"添加成功",
          type:'success'
        })
        parent.location.reload()

        }else
        {
          ElMessage({
            message:'添加失败',
            type:'danger'
          })
        }
        
      })
      // console.log(this.info1)
    }
  }
}
</script>